<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>欧普商城</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/public.css">
    <link rel="stylesheet" href="./css/login2.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1993122_z2zu5zv3et.css">
    <script src="./js/jquery.min.js"></script>
<body>
    <header>
           <div class="main">
               <div class="head_main">
                        <span>欢迎登录</span>
               </div>
           </div>
           
           <!-- 边上的条 -->
           <div id="gloal-bg">
                <div class="fix-nav">
                    <ul>
                       <li><span class="car"></span>
                           <em class="em em-content1 em1">购物车</em></li>
                       <li><span class="ear"></span>
                        <em class="em em-content2 em1">客服</em></li>
                       <li><span class="code"></span>
                        <em class="em1 em-content"><img src="./img/QR_code.png" alt=""><h2>手机购物更优惠</h2></em></li>
                       <li><span class="phone"></span>
                        <em class="em em-content3 em1">消息</em></li>
                    </ul>
                </div>
                <div class="fix-top">
                    <a href="#"><span class="toTop"></span>
                        <em class=" goTop">返回顶部</em>
                    </a>
                </div>
           </div>
    </header>
   <article>
         <div class="main ar_main">
            <div id="login-conent">
                <div class="tab">
                    <span id="tab1">手机登录</span>
                    <span id="tab2">账号登录</span>
                </div>
                <div class="tab1">
                    <div class="from-group">
                        <input type="text" placeholder="手机号" class="tel">              
                    </div>
                    <div class="from-group place-group">
                        <input type="password" placeholder="短信验证码" class="qpwd">
                        <input type="submit" value="获取短信验证码" class="subInput">
                        <span id="tip2"></span> 
                    </div>
                </div>
                <div class="tab2">
                    <div class="from-group">
                        <input type="text" placeholder="手机号" id="tel"> 
                        <span id="tit"></span>               
                    </div>
                    <div class="from-group ">
                        <input type="password" placeholder="密码" id="pwd">
                    </div>
                </div>
                <div class=" group1">
                    <button id="btn">登录</button>
                </div>
                    <h3>内购注册会员与认证>></h3>
                    <h3>第三方登录</h3>
                <div class=" group2">
                    <ul>
                        <li><img src="./img/qq.png" alt=""></li>
                        <li><img src="./img/weixin.png" alt=""></li>
                        <li><img src="./img/weibo.png" alt=""></li>
                    </ul>
                    <a href="http://127.0.0.1:56/login.html"><h4>免费注册</h4></a>
                </div>
            </div>
            
        </div>
   </article>
    <footer>
        <div class="main f_main">
            <div class="f_box1">
                <div class="f_bo1">
                    <p>扫码快捷购物</p>
                    <img src="./img/QR_code.png" alt="">
                </div>
                <div class="f_bo2">
                    <p>官方商城电话</p>
                    <h4>0512-63828888-5022</h4>
                    <h4>0512-63828888-5333</h4>
                    <p>工作时间</p>
                    <h4>周一到周日 8:00-凌晨1:00</h4>
                </div>
            </div>
            <ul>
                <li>购物指南
                    <h6>购物须知</h6>
                </li>
                <li>支付方式</li>
                <li>配送服务</li>
                <li>售后保障</li>
                <li>关于欧普</li>
            </ul>
            <h5>Copyright © 1996-2017欧普照明股份有限公司版权所有&nbsp;&nbsp;|&nbsp;&nbsp;沪ICP备15024911号-1</h5>
            <div class="f_box2">
                <img src="./img/foot1.png" alt="">
                <img src="./img/foot2.png" alt="">
                <img src="./img/foot3.png" alt="">
            </div>
        </div>
    </footer>


    <script>
        $(".h_span1").mouseenter(function(){
            $(".xiala1").css({
                display:"inline-block",
                transform: "rotate(180deg)",
                transition:"0.5s",
            })
            $(".box1").show()    
        }).mouseleave(function(){
            $(".xiala1").css({
                display:"inline-block",
                transform: "rotate(0deg)",
                transition:"0.5s",
            })
            $(".box1").hide()
        })
 
        $("#ul1_a2").mouseenter(function(){
            $(".box2").show()    
        }).mouseleave(function(){
            $(".box2").hide() 
        })
        $("#ul1_a1").mouseenter(function(){
            $(".box3").slideDown() 
        }).mouseleave(function(){
            $(".box3").hide() 
        })
        $(".bannerLeft .navLi").mouseenter(function(){
            $(this).find($(".nav-items")).show()
        }).mouseleave(function(){
            $(this).find($(".nav-items")).hide()
        })
    //    正则验证
        $("#tel").blur(function() {
            let reNum = /^(13|15|18)\d{9}$/
            if (reNum.test($("#tel").val())) {
                $("#tit").html("合格")
                $("#tit").css({
                    color: "black"
                })
            } else {
                $("#tit").html("请输入正确格式的手机号码")
                $("#tit").css({
                    color: "red"
                })
            }
        })
        $("#tab1").click(function(){
            $("#tab2").css({
                color:"#777",
                fontWeight:500,
            })
            $("#tab1").css({
                color:"#013ca6",
                fontWeight:600,
            })
            $(".tab2").hide();
            $(".tab1").show();
        })
        $("#tab2").click(function(){
            $("#tab1").css({
                color:"#777",
                fontWeight:500,
            })
            $("#tab2").css({
                color:"#013ca6",
                fontWeight:600,
            })
            $(".tab1").hide();
            $(".tab2").show();
        })
        $("#btn").click(function(){
            let tel = $("#tel").val()
            let pwd =$("#pwd").val()
            $.ajax({
                url:"http://127.0.0.1:56/userData",
                data:{
                    tel:tel,
                    pwd:pwd
                },
                success:function(data){
                    let newData = JSON.parse(data)
                    console.log(newData)
                    if(newData.length !== 0) {
                        newData.forEach(item => {
                            if(pwd){
                                if(item.password == pwd){
                                    window.location.href = "http://127.0.0.1:56/home.html"
                                }
                                else{
                                    alert("密码错了")
                                }
                            }
                        });
                    }else{
                        alert("没有该用户请注册")
                    }
                }
                })
        })


    </script>
</body>
</html>